/* 混入 */
import {debounce} from "@/common/utils";
import BackTop from "@/components/content/backTop/BackTop";
import {BACKTOP_DISTANCE} from "@/common/const";

/**
 * 图片加载完毕防抖函数Mixin
 * @type {{data(): {itemImageLoad: null}, mounted(): void}}
 */
export const itemListenerMixin = {
  data() {
    return {
      itemImageLoad: null,
    }
  },
  mounted() {
    //监听item中图片加载完成
    const refresh = debounce(this.$refs.scroll.refresh, 100)
    this.itemImageLoad = () => {//重新计算可滚动区域
      refresh();
    }
    this.$bus.$on('itemImageLoad', this.itemImageLoad);
  },
}
/**
 * 回到顶部按钮的显示和隐藏Mixin
 * @type {{components: {BackTop: {name: string}}, data(): {isShowBackTop: boolean}, methods: {backTopClick(): void, listenBackTopIsShow(*): void}}}
 */
export const backTopMixin = {
  components: {
    BackTop,
  },
  data() {
    return {
      isShowBackTop: false,//回到顶部按钮的显示隐藏
    }
  },
  methods: {
    //回到顶部
    backTopClick() {
      //父组件访问子组件
      this.$refs.scroll.scrollTo(0, 0, 600);
    },
    listenBackTopIsShow(position) {
      //控制回到顶部按钮是否显示
      if (this.isShowBackTop !== (position.y < -BACKTOP_DISTANCE)) {
        this.isShowBackTop = position.y < -BACKTOP_DISTANCE;
      }
    }
  },
}
